<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Hello, AR World! • A-Frame</title>
    <meta name="description" content="Hello, AR World! • A-Frame">
    <script src="../../../dist/aframe-master.js"></script>
    <script>
      AFRAME.registerComponent('follow-shadow', {
        schema: {type: 'selector'},
        init() {this.el.object3D.renderOrder = -1;},
        tick() { 
          if (this.data) {
            this.el.object3D.position.copy(this.data.object3D.position); 
            this.el.object3D.position.y-=0.001; // stop z-fighting
          }
        }
      });
    </script>
  </head>
  <body>
    <a-scene
      reflection="directionalLight:a-light[type=directional]"
      ar-hit-test="target:#objects;"
      renderer="physicallyCorrectLights:true;colorManagement:true;exposure:1;toneMapping:ACESFilmic;"
      shadow="type:pcfsoft"
    >
      <a-light type="directional" light="castShadow:true;" position="1 1 1" intensity="0.5" shadow-camera-automatic="#objects"></a-light>
      <a-camera position="0 0.4 0" wasd-controls="acceleration:10;"></a-camera>
      <a-entity id="objects" scale="0.2 0.2 0.2" position="0 0 -1" shadow>
        <a-box position="-1 0.5 1" rotation="0 45 0" color="#4CC3D9"></a-box>
        <a-sphere position="0 1.25 -1" radius="1.25" color="#EF2D5E"></a-sphere>
        <a-cylinder position="1 0.75 1" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
      </a-entity>
      <a-plane follow-shadow="#objects" material="shader:shadow" shadow="cast:false;" rotation="-90 0 0" width="2" height="2"></a-plane>
      <a-sky color="#ECECEC" hide-on-enter-ar></a-sky>
    </a-scene>
  </body>
</html>
